import React from "react";
import { View, StyleSheet } from "react-native";

// 添加类型定义，以便在 TypeScript 中使用
type GapWithStaticProperties = typeof Gap & {
  H10: React.ReactElement;
  V10: React.ReactElement;
  H20: React.ReactElement;
  V20: React.ReactElement;
};

interface GapProps {
  size: number; // 间距大小，默认为10
  direction: "horizontal" | "vertical"; // 间距方向，默认为垂直vertical
}

// 扩展 Gap 组件，添加静态属性
const Gap = ({ size = 10, direction = "vertical" }: GapProps) => {
  const style = direction === "vertical" ? { height: size } : { width: size };

  return <View style={[styles.gap, style]} />;
};

Object.assign(Gap, {
  H10: <Gap size={10} direction="horizontal" />,
  V10: <Gap size={10} direction="vertical" />,
  H20: <Gap size={20} direction="horizontal" />,
  V20: <Gap size={20} direction="vertical" />,
  // ......
});

const styles = StyleSheet.create({
  gap: {
    // 例如：为了方便调试，可以添加一个背景色
    // backgroundColor: 'transparent',
  },
});

export default Gap as GapWithStaticProperties;
